import React, { Component } from 'react'
import { View, Text, ScrollView, TouchableOpacity } from 'react-native'
import { Container } from 'native-base'
import { Actions } from 'react-native-router-flux'
import HeaderWhite from '../../../components/header/headerWhite'
import HTML from 'react-native-render-html'
import commonStyle from '../../../libs/commonStyle'
import { deviceWidthDp } from '../../../libs/pxToDp'
import { connect } from 'react-redux' // 引入connect函数
import * as articleAction from '../../../redux/actions/article'
import API from '../../../api/request'

class Detail extends Component {
  constructor (props) {
    super(props)
    this.state = {
      money: '',
      id: '',
      info: {}
    }
  }
  async componentDidMount () {
    let { id, money } = this.props.navigation.state.params
    let res = await this.articleDetailApi(id)
    this.setState({
      money,
      id,
      info: res || {}
    })
  }

  // 文章详情
  async articleDetailApi (id) {
    const url = '/api/article/detail/' + id
    let res = await API.post(url)
    if (res && res.code === '200') {
      return res.data
    } else {
      return {}
    }
  }

  _onSharePanel () {
    let { detailInfo, user } = this.props
    Actions.share({
      title: detailInfo.title,
      webpageUrl:
        'https://thinkleaf.cn/web/articleDetail.html?_id=' +
        detailInfo.id +
        '&myId=' +
        user.userId
    })
  }
  render () {
    const { info, money } = this.state
    return (
      <Container>
        <HeaderWhite title='文章详情' hasLeft />
        <View style={[commonStyle.flexColumn]}>
          <ScrollView>
            <View style={[commonStyle.p20, commonStyle.flexItem]}>
              <Text style={[commonStyle.f42]}>{info.title}</Text>
              <View style={[commonStyle.flexRow, commonStyle.pt20]}>
                {/* <Text style={commonStyle.colorGray}>累计收入{info.money}</Text> */}
                <Text style={[commonStyle.activeColor]}>
                  好友阅读你得{money}元
                </Text>
              </View>
              <View style={commonStyle.mt70}>
                <HTML html={info.content} imagesMaxWidth={deviceWidthDp} />
              </View>
            </View>
          </ScrollView>
        </View>
        <TouchableOpacity
          onPress={this._onSharePanel.bind(this)}
          style={[
            commonStyle.h100,
            commonStyle.activeBackgroundColor,
            commonStyle.flexCenter,
            { position: 'absolute', bottom: 0, width: '100%' }
          ]}
        >
          <Text style={commonStyle.colorWhite}>转发赚钱，每阅读赚1-2毛</Text>
        </TouchableOpacity>
      </Container>
    )
  }
}

export default connect(
  state => ({
    user: state.login.user,
    detailInfo: state.article.detailInfo
  }),
  dispatch => ({
    articleDetail: id => dispatch(articleAction.articleDetail(id))
  })
)(Detail)
